<template>
    <el-row style="height:100%">
      <el-form style="margin-left: 15px;margin-top: 20px;" :inline="true" :model="queryData">
        <el-form-item label="巡检日期">
          <el-date-picker v-model="queryData.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select v-model="queryData.isOutOf" placeholder="设备状态">
            <el-option
              v-for="item in repairIsOutOfOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="greenButton" @click="chaxun" type="primary" >查询</el-button>
          <el-button class="greenButton" @click="reset" type="primary" >重置</el-button>
        </el-form-item>
        <el-form-item style="float:right;margin-right:60px;">
          <el-button type="primary" class="greenButton" @click="dleMany()">批量删除</el-button>
      </el-form-item>
      </el-form>
      <el-table
        border
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 98%;border:1px solid #00BDAC;"
        height="78%"
        :data="buildingList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
      >
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column align="center" width="50px" type="index" :index="table_index" label="序号"></el-table-column>
        <el-table-column align="center" prop="u_name" label="巡检人"></el-table-column>
        <el-table-column align="center" prop="ta_time" label="巡检日期"></el-table-column>
        <el-table-column align="center" prop="route_name" label="巡检路线"></el-table-column>
        <el-table-column align="center" prop="status1" label="任务完程度" width="80px"></el-table-column>
        <el-table-column align="center" prop="eq_model" label="设备号"></el-table-column>
        <el-table-column align="center" prop="maintenance" label="是否过保"></el-table-column>
        <el-table-column align="center" prop="eq_name" label="设备名称"></el-table-column>
        <el-table-column align="center" prop="eq_floor_address" label="设备地点"></el-table-column>
        <el-table-column align="center" prop="repair_person" label="维修人"></el-table-column>
        <el-table-column align="center" prop="update_time" label="维修日期" width="200px"></el-table-column>
        <el-table-column align="center"  label="维修后设备状态">
          <template slot-scope="scope">
            <span v-if="scope.row.repair_eq_status == 1">正常</span>
             <span v-if="scope.row.repair_eq_status == 0">报废</span>
              <span v-if="scope.row.repair_eq_status == -1"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="reapir_cost" label="维修金额"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="pinkButton"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer" style="position: relative;margin-top:20px;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total ,prev, pager, next, jumper"
          :total="buildingList.length"
          prev-text="上一页"
          next-text="下一页"
        ></el-pagination>
        <el-button
              size="middle"
              @click="daochu()"
              class="greenButton dachu"
            >导出/下载</el-button>
      </div>
    </el-row>
</template>

<script>
    export default {
        name: "baobiao",
      data(){
          return {
            queryData: {
              date: "",
              isOutOf: ""
            },
            currentPage:1,
            pagesize:10,
            repairIsOutOfOptions: [
              {value: "", label: "全部"},
              {value: "1", label: "正常"},
              {value: "0", label: "报废"}
            ],

            nameOptions: [
              {value: "1", label: "打印机"},
              {value: "2", label: "台式电脑"}
            ],
            buildingList: [],
            zonglist:[],
            multipleSelection:[]
          }
      },
      mounted(){
        this.zongbiao();
      },
      methods:{
        dleMany(){
          console.log(this.multipleSelection)
          if(this.multipleSelection.length==0){
        return this.$message.error('请选择您要删除的信息')
      }
      const arr = []
      this.multipleSelection.forEach((item)=>{
          arr.push(item.id)
      })
      console.log(arr.join(','))
          this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let parme = {
                ids:arr.join(',')
              }
              console.log(parme)
              this.ajaxCommon.ajax({
                    url: 'summaryDelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.zongbiao();
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        handleSelectionChange(selection){
            console.log(selection)
            this.multipleSelection = selection
        },
        handleDelete(row){
          this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let parme = {
                ids:row.id
              }
              this.ajaxCommon.ajax({
                    url: 'summaryDelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.zongbiao();

                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        reset(){
          this.queryData.isOutOf  = ''
          this.queryData.date = ''
          this.chaxun()
        },
        table_index(index){
          return (this.currentPage -1) * this.pagesize + index + 1
        },  
        //  页面
        handleCurrentChange(val){
          this.currentPage = val;
        },
        // 获取
        zongbiao(){
          this.ajaxCommon.ajax({
          url: 'summarylist',
          success: (res)=>{
             console.log('报表总表列表',res);
             if(res.code == 200){
               this.buildingList = res.data;
               this.zonglist = res.data;

             }
             
          }
        });

        },
        // 查询
        chaxun(){
          console.log(this.queryData.date);

          if(this.queryData.isOutOf == ''){
            let arr = [];
            this.zonglist.forEach(item => {
              
                arr.push(item)
             
            })
            this.buildingList = arr;
          }

          let datatime = '';
          if(this.queryData.date){
            let datayear = this.queryData.date.getFullYear();
            let datamonth = this.queryData.date.getMonth() + 1;
            let datadate = this.queryData.date.getDate();
            if(datamonth/10 < 1){
              datamonth = '0'  + datamonth;
            }
            if(datadate/10 < 1){
              datadate = '0'  + datadate;
            }
            datatime = datayear + '-' + datamonth + '-' + datadate;
          }
          console.log(datatime)
          if(datatime && !this.queryData.isOutOf){
            let arr = [];
            this.zonglist.forEach(item => {
              if(datatime == item.ta_time){
                arr.push(item)
              }
            })
            this.buildingList = arr;
          }
           if(!datatime && this.queryData.isOutOf){
            let arr = [];
            this.zonglist.forEach(item => {
              if(this.queryData.isOutOf == item.repair_eq_status){
                arr.push(item)
              }
            })
            this.buildingList = arr;
          }
           if(datatime && this.queryData.isOutOf){
            let arr = [];
            this.zonglist.forEach(item => {
              if((datatime == item.ta_time) && (this.queryData.isOutOf == item.repair_eq_status)){
                arr.push(item)
              }
            })
            this.buildingList = arr;
          }
          

        },
        // 导出
        daochu(){
          window.location.href = "http://hqgj.heweixiao.cn/export_summary_list"
        }

      }
    }
</script>

<style scoped>
.dachu{
  position: absolute;
  top: 0;
  right: 5%;
}
</style>
